<script setup lang='ts'>
const stabName = ref('1')
function onsTabClick({ name }) {
  stabName.value = name
}
const data = ref([
  {
    type: '资源',
    person: '张三',
    buyperson: '史倩杉',
    status: '待报价',
    tprice1: '80000',
    price: '8000',
    tprice2: '80000',
    desc: '防火墙/10，用于拓展业务用于拓展业务用于拓展业务用于拓展业务用于拓展业务用于拓展业务用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    bjtime: '2024-7-28',
    id: '1',
  },
  {
    type: '硬件',
    buyperson: '史倩杉',
    person: '张三',
    status: '已驳回',
    reason: '询价信息不具体',
    tprice1: '160000',
    tprice2: '160000',
    price: '8000',
    desc: '云主机/20，用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    bjtime: '2024-7-29',
    id: '1',
  },
  {
    type: '云平台',
    buyperson: '赵愉静',
    person: '张三',
    status: '已报价',
    tprice1: '16000',
    tprice2: '16000',
    price: '8000',
    desc: 'xxx云平台/2，用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    reason: '采购员备注的信息',
    bjtime: '2024-7-21',
    id: '2',
  },
  {
    type: '硬件',
    num: '2',
    buyperson: '史倩杉',
    person: '张三',
    status: '待报价',
    price: '8000',
    tprice1: '80000',
    tprice2: '80000',
    desc: '第二次重新询价：云主机/10，用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    bjtime: '2024-7-26',
    id: '2',
  },
])
const databuy = ref([
  {
    type: '资源',
    person: '张三',
    buyperson: '史倩杉',
    status: '待采购',
    tprice1: '80000',
    price: '8000',
    tprice2: '80000',
    desc: '防火墙/10，用于拓展业务用于拓展业务用于拓展业务用于拓展业务用于拓展业务用于拓展业务用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    bjtime: '2024-7-28',
    id: '1',
  },
  {
    type: '硬件',
    buyperson: '史倩杉',
    person: '张三',
    status: '已驳回',
    reason: '物资不足以满足采购需求',
    tprice1: '160000',
    tprice2: '160000',
    price: '8000',
    desc: '云主机/20，用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    bjtime: '2024-7-29',
    id: '1',
  },
  {
    type: '云平台',
    buyperson: '赵愉静',
    person: '张三',
    status: '已采购',
    tprice1: '16000',
    tprice2: '16000',
    price: '8000',
    desc: 'xxx云平台/2，用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    reason: '采购员备注的信息',
    bjtime: '2024-7-21',
    id: '2',
  },
  {
    type: '硬件',
    num: '2',
    buyperson: '史倩杉',
    person: '张三',
    status: '待采购',
    tprice1: '80000',
    price: '8000',
    tprice2: '80000',
    desc: '第二次重新采购：云主机/20，用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    bjtime: '2024-7-26',
    id: '2',
  },
  {
    type: '硬件',
    num: '2',
    buyperson: '史倩杉',
    person: '张三',
    status: '待审核',
    price: '8000',
    tprice1: '80000',
    tprice2: '80000',
    desc: '第二次重新询价：云主机/10，用于拓展业务',
    deadline: '2024-7-30',
    time: '2024-7-20',
    bjtime: '2024-7-26',
    id: '2',
  },
])
function objectSpanMethod({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1,
      }
    }
    else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if (columnIndex === 5 || columnIndex === 6) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1,
      }
    }
    else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if (columnIndex === 7 && [0, 1].includes(rowIndex)) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    }
    else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}
</script>

<template>
  <el-tabs v-model="stabName" type="border-card" tab-position="top" flex-1>
    <el-tab-pane label="询价" flex space-x-4 name="1">
      <div w-full>
        <BaseTable :data="data" stripe w-full border :span-method="objectSpanMethod">
          <el-table-column prop="id" label="询价记录" width="70" />
          <el-table-column prop="person" label="申请人" width="70" />
          <el-table-column prop="type" label="询价类型" width="70" />
          <el-table-column prop="desc" label="询价说明" min-width="200" />
          <el-table-column prop="time" label="发起时间" />
          <el-table-column prop="deadline" label="截止时间" />
          <el-table-column prop="buyperson" label="采购员" />
          <el-table-column prop="" label="供应商名称" />
          <el-table-column prop="" label="联系人" />
          <el-table-column prop="" label="支付方式" />
          <el-table-column prop="" label="退订方式" />
          <el-table-column label="项目报价">
            <el-table-column prop="price" label="单价" />
            <el-table-column prop="tprice1" label="总价" />
          </el-table-column>

          <el-table-column label="采购成本">
            <el-table-column prop="price" label="单价" />
            <el-table-column prop="tprice2" label="总价" />
          </el-table-column>
          <el-table-column label="报价备注 / 驳回原因" prop="reason" width="150" />
          <el-table-column label=" 采购主管审核备注" prop="" width="150" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag v-if="row.status === '待报价'" type="info">
                {{ row.status }}
              </el-tag>
              <el-tag v-else-if="row.status === '已驳回'" type="danger">
                {{ row.status }}
              </el-tag>
              <el-tag v-else-if="row.status === '已报价'" type="success">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="bjtime" label="报价时间" />
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <div v-if="row.status !== '已驳回'">
                <el-button v-if="row.status === '待报价'" type="primary">
                  完成报价
                </el-button>
                <el-button v-if="row.status === '已报价'" type="primary">
                  修改报价
                </el-button>

                <el-button v-if="row.status !== '已报价'" type="danger">
                  驳回
                </el-button>
              </div>
              <el-button v-if="row.status === '已驳回'" type="primary">
                重新询价
              </el-button>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </el-tab-pane>
    <el-tab-pane label="采购" name="2">
      <BaseTable :data="databuy" stripe show-summary w-full border :span-method="objectSpanMethod">
        <el-table-column prop="id" label="采购记录" width="70" />
        <el-table-column prop="person" label="申请人" width="70" />
        <el-table-column prop="type" label="采购类型" width="70" />
        <el-table-column prop="desc" label="采购说明" min-width="200" />
        <el-table-column prop="time" label="发起时间" />
        <el-table-column prop="deadline" label="截止时间" />
        <el-table-column prop="buyperson" label="采购员" />
        <el-table-column prop="" label="供应商名称" />
        <el-table-column prop="" label="联系人" />
        <el-table-column prop="" label="支付方式" />
        <el-table-column prop="" label="退订方式" />
        <el-table-column label="项目报价">
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="tprice1" label="总价" />
        </el-table-column>

        <el-table-column label="采购成本">
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="tprice2" label="总价" />
        </el-table-column>
        <el-table-column prop="bjtime" label="计费时间" />
        <!-- <el-table-column label=" 总价" /> -->
        <el-table-column label="采购备注 / 驳回原因" prop="reason" width="150" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.status === '待采购'" type="info">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已驳回'" type="danger">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已采购'" type="success">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bjtime" label="完成时间" />

        <el-table-column label="操作" width="240">
          <template #default="{ row }">
            <div flex gap1>
              <div v-if="row.status !== '已驳回'">
                <el-button v-if="row.status === '待采购'" type="primary">
                  完成采购
                </el-button>

                <el-button v-if="row.status !== '已采购'" type="danger">
                  驳回
                </el-button>
              </div>
              <el-button v-if="row.status === '已驳回'" type="primary">
                重新申请
              </el-button>
              <el-button v-if="row.status === '待审核'" type="primary">
                采购主管审核
              </el-button>
            </div>
          </template>
        </el-table-column>
      </BaseTable>
    </el-tab-pane>
    <el-tab-pane label="（采购退订）" name="3">
      <BaseTable :data="databuy" stripe show-summary w-full border :span-method="objectSpanMethod">
        <el-table-column prop="id" label="采购记录" width="70" />
        <el-table-column prop="person" label="申请人" width="70" />
        <el-table-column prop="type" label="采购类型" width="70" />
        <el-table-column prop="desc" label="采购说明" min-width="200" />
        <el-table-column prop="time" label="发起时间" />
        <el-table-column prop="deadline" label="截止时间" />
        <el-table-column prop="buyperson" label="采购员" />

        <el-table-column label="项目报价">
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="tprice1" label="总价" />
        </el-table-column>

        <el-table-column label="采购成本">
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="tprice2" label="总价" />
        </el-table-column>
        <el-table-column prop="bjtime" label="计费时间" />
        <!-- <el-table-column label=" 总价" /> -->
        <el-table-column label="采购备注 / 驳回原因" prop="reason" width="150" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.status === '待采购'" type="info">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已驳回'" type="danger">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已采购'" type="success">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bjtime" label="完成时间" />
        <el-table-column prop="bjtime" label="退订项(部分退订项时)" />
        <el-table-column prop="bjtime" label="期望退订日期" />
        <el-table-column prop="bjtime" label="停止计费时间" />

        <el-table-column label="操作" width="360">
          <template #default="{ row }">
            <div>
              <el-button type="primary">
                申请退订(项目:部分/全部)
              </el-button>

              <el-button type="primary">
                完成退订(采购)
              </el-button>
            </div>
          </template>
        </el-table-column>
      </BaseTable>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang='scss'>

</style>
